import React, { Component } from 'react';
import '../styles/Cate.scss'

import pic from '../assets/1.png'
import pic2 from '../assets/2.png'
import pic3 from '../assets/3.png'
import pic4 from '../assets/4.png'
import pic5 from '../assets/5.png'

class Cate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0,
            list1: [
                {
                    name: '活动专区',
                    list2: [
                        {
                            name: '护理',
                            list3: [
                                { pic: pic, name: '欧莱雅' }, { pic: pic, name: '大宝' }, { pic: pic, name: '青蛙王子' }
                            ]
                        }
                    ]
                },
                {
                    name: '品牌',
                    list2: [
                        {
                            name: '欧莱雅',
                            list3: [
                                { pic: pic2, name: '卸妆水' }, { pic: pic2, name: '洗面奶' }, { pic: pic2, name: '爽肤水' }
                            ]
                        }
                    ]
                },
                {
                    name: '美容护肤',
                    list2: [
                        {
                            name: '面部护理',
                            list3: [
                                { pic: pic, name: '卸妆' }, { pic: pic2, name: '洁面' }, { pic: pic3, name: '爽肤水' }, { pic: pic4, name: '乳液' }, { pic: pic5, name: '精华' }
                            ]
                        }
                    ]
                },
                {
                    name: '彩妆',
                    list2: [
                        {
                            name: '欧莱雅',
                            list3: [
                                { pic: pic2, name: '卸妆水' }, { pic: pic2, name: '洗面奶' }, { pic: pic2, name: '爽肤水' }
                            ]
                        }
                    ]
                },
                {
                    name: '香水',
                    list2: [
                        {
                            name: '欧莱雅',
                            list3: [
                                { pic: pic2, name: '卸妆水' }, { pic: pic2, name: '洗面奶' }, { pic: pic2, name: '爽肤水' }
                            ]
                        }
                    ]
                },
                {
                    name: '酒类',
                    list2: [
                        {
                            name: '欧莱雅',
                            list3: [
                                { pic: pic2, name: '卸妆水' }, { pic: pic2, name: '洗面奶' }, { pic: pic2, name: '爽肤水' }
                            ]
                        }
                    ]
                },
                {
                    name: '腕表首饰',
                    list2: [
                        {
                            name: '欧莱雅',
                            list3: [
                                { pic: pic2, name: '卸妆水' }, { pic: pic2, name: '洗面奶' }, { pic: pic2, name: '爽肤水' }
                            ]
                        }
                    ]
                },
                {
                    name: '饰品箱包',
                    list2: [
                        {
                            name: '欧莱雅',
                            list3: [
                                { pic: pic2, name: '卸妆水' }, { pic: pic2, name: '洗面奶' }, { pic: pic2, name: '爽肤水' }
                            ]
                        }
                    ]
                }

            ]
        }
    }
    handle(index) {
        this.setState({ currentIndex: index })
    }
    render() {
        return (
            <div className='cate'>
                <div className="left">
                    {
                        this.state.list1.map((item, index) => {
                            return (
                                <div onClick={() => { this.handle(index) }} className={'one ' + (this.state.currentIndex == index ? 'active' : '')} key={index} >{item.name}</div>
                            )
                        })
                    }
                </div>
                <div className="right">

                    {
                        this.state.list1[this.state.currentIndex].list2.map((item2, index) => {
                            return (
                                <div className="list2" key={index}>
                                    <h5 key={index}>{item2.name}</h5>
                                    <div className="list3">
                                        {
                                            item2.list3.map((item3, index) => {
                                                return (
                                                    <div className="item3" key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="name">{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Cate;